<template>
  <div class="login">
    <div class="login-con">
      <div class="left">
        <p
          style="
            text-align: center;
            margin: 20px 0 40px 0;
            font-size: 30px;
            color: #fff;
          "
        >
          <img src="../../assets/logo.png" width="260" />
        </p>

        <p
          style="margin-top: 50px; color: #333; font-size: 14px"
          align="center"
        >
          2023 &copy; Y-admin
        </p>
      </div>
      <div class="right">
        <ul class="menu-tab">
          <li
            v-for="v in MenuData"
            :class="{ current: v.current }"
            :key="v.type"
            @click="clickMenu(v)"
          >
            {{ v.txt }}
          </li>
        </ul>
        <div class="form">
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            status-icon
            :rules="rules"
            label-width="auto"
            label-position="top"
          >
            <el-form-item label="账号" prop="username">
              <el-input
                v-model="ruleForm.username"
                type="txt"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item label="密码" prop="pass">
              <el-input
                v-model="ruleForm.password"
                @keyup.enter.native="submitForm(ruleFormRef)"
                minlength="6"
                maxlength="15"
                type="password"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                :disabled="btnbool"
                type="primary"
                style="width: 100%"
                @click="submitForm(ruleFormRef)"
              >
                {{ model === "login" ? "登录" : "注册" }}</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
    
<script setup lang='ts'>
import { ElMessage } from "element-plus";
import { reactive, ref, onMounted, watch } from "vue";
import type { FormInstance } from "element-plus";
import * as ck from "@/util/verfifcation.js";
import { login, register } from "@/api/index.js";
import useMD5 from "@/hook/index.js";
import { useRouter } from "vue-router";
let router = useRouter();
const MenuData = reactive([
  { txt: "登录", current: true, type: "login" },
  { txt: "注册", current: false, type: "register" },
]);
let model = ref("login");
let clickMenu = (item: any) => {
  MenuData.forEach((elemt) => {
    elemt.current = false;
  }),
    (item.current = true);
  model.value = item.type;
  console.log(model.value);
};
onMounted(() => {
  console.log(process.env.VUE_APP_API);
});
// 表单校验
const ruleFormRef = ref<FormInstance>();

const checkUserName = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error("请输入账号"));
  } else {
    callback();
  }
};

const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    callback();
  }
};
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (model.value === "login") {
    callback();
  }
  if (value === "") {
    callback(new Error("再次输入密码"));
  } else if (value !== ruleForm.pass) {
    callback(new Error("Two inputs don't match!"));
  } else {
    callback();
  }
};

const ruleForm = reactive({
  username: "admin",
  password: "admin",
});
let btnbool = ref(false);
watch(ruleForm, (newval, oldval) => {
  if (model.value === "login") {
    if (newval.username != "" && newval.pass != "") {
      btnbool.value = false;
    } else {
      btnbool.value = true;
    }
  } else {
    if (newval.username != "" && newval.pass != "" && newval.checkPass != "") {
      btnbool.value = false;
    } else {
      btnbool.value = true;
    }
  }
});

const rules = reactive({
  pass: [{ validator: validatePass, trigger: "blur" }],
  checkPass: [{ validator: validatePass2, trigger: "blur" }],
  username: [{ validator: checkUserName, trigger: "blur" }],
});
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      if (model.value === "login") {
        // login({
        //   ...ruleForm,
        // })
        //   .then((res: any) => {
        //     if (res.data.code === 200) {
        //       ElMessage.success("登录成功");
        //       //   console.log("登录成功");
        //       router.push("/home/index");
        //       sessionStorage.setItem("token", res.data.map.token);
        //       sessionStorage.setItem(
        //         "userInfo",
        //         JSON.stringify(res.data.map.user)
        //       );
        //       // } else {
        //       //   console.log("登录失败");
        //       //   ElMessage.error("登录失败");
        //     } else {
        //       ElMessage.error(res.data.data);
        //     }
        //   })
        //   .catch((err: any) => {
        //     ElMessage.error(err.response.data.message);
        //   });
        ElMessage.success("登录成功");
        router.push("/home");
      } else {
        register({ ...ruleForm }).then((res: any) => {
          if (res.data.code === 200) {
            ElMessage({
              message: "注册成功",
              type: "success",
            });
            model.value = "login";
            MenuData.forEach((v) => {
              v.current = false;
            });
            MenuData[0].current = true;
          } else {
            ElMessage.error("注册失败");
          }
        });
      }
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
</script>
    
<style lang="scss" scoped>
/deep/ .el-form-item__label {
  color: #fff;
}

.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  // background: url('https://demo.buildadmin.com/assets/bg.95f82371.jpg');
  background: url("https://dogefs.s3.ladydaily.com/~/source/wallhaven/full/m3/wallhaven-m3w6pk.png?w=2560&h=1440&fmt=webp")
    no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
}
.login-con {
  h1 {
    font-size: 25px;
    text-shadow: 5px 5px 5px #888;
    text-align: center;
    font-weight: bold;
    margin: 30px 0;
    color: #fff;
  }
  display: flex;
  width: 1000px;
  // background: #fff;
  border: 1px solid #ccc;
  // padding: 50px;
  box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
    6.7px 6.7px 5.3px rgba(0, 0, 0, 0.026),
    12.5px 12.5px 10px rgba(0, 0, 0, 0.032),
    22.3px 22.3px 17.9px rgba(0, 0, 0, 0.041),
    41.8px 41.8px 33.4px rgba(0, 0, 0, 0.053),
    100px 100px 80px rgba(0, 0, 0, 0.07);
  // height: 500px;
  border-radius: 20px;
  transition: all 1s;
  // background-image: -moz-linear-gradient(180deg, rgb(158, 255, 244), rgb(239, 194, 255));

  // background-image: -webkit-linear-gradient(180deg, rgb(158, 255, 244), rgb(239, 194, 255));
  div {
    flex: 1;
  }
  .left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    padding: 50px;
  }
  .right {
    padding: 80px 50px;
  }
  // div:nth-child(1) {
  //   background: #fff;
  //   color: #333;
  // }
  // background-image: linear-gradient(180deg, rgb(158, 255, 244), rgb(239, 194, 255));
  // &:hover {
  //   box-shadow: 3px 3px 5px#ccc, -3px -3px 5px#eee;
  // }
}

.menu-tab {
  display: flex;
  justify-content: center;

  li {
    padding: 10px;
    cursor: pointer;
    width: 80px;
    text-align: center;
    color: #fff;
  }
}

.form {
  margin-top: 20px;
}

li.current {
  color: #333;
  background: #fff;
}
</style>